<template>
  <div class="bg-[#efefef] w-full p-5">
    <div class="flex gap-3 items-center" v-if="false">
      <img src="" class="w-16 h-16 rounded-full bg-red-200" alt="" />
      <div class="flex-1 flex flex-col justify-around">
        <strong class="text-lg">歌手：xxx</strong>
        <div class="text-sm text-gray-500">
          <span class="mr-6 cursor-default hover:text-green-500">单曲:xxx</span>
          <span class="ml-6 cursor-default hover:text-green-500">专辑:xxxx</span>
        </div>
      </div>
      <div class="flex gap-2 items-center text-sm bg-gray-300 px-3 rounded-full h-fit py-2">
        <svg t="1729240513089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="21976" width="20" height="20">
          <path
            d="M513.308444 269.084444c50.517333 0 91.420444 41.927111 91.420445 93.582223 0 33.962667-17.635556 63.715556-44.145778 80.099555l-0.056889 244.508445h87.722667a113.777778 113.777778 0 0 1 113.777778 113.550222l0.170666 64.455111a113.777778 113.777778 0 0 1-113.550222 114.062222H373.475556a113.777778 113.777778 0 0 1-113.777778-113.550222l-0.113778-64.512a113.777778 113.777778 0 0 1 113.493333-114.005333h91.989334V442.026667a93.866667 93.866667 0 0 1-42.837334-71.338667l-0.341333-8.078222c0-51.655111 40.96-93.582222 91.420444-93.582222z m134.940445 503.523556H373.304889a28.444444 28.444444 0 0 0-27.932445 23.381333l-0.455111 5.12 0.113778 64.512a28.444444 28.444444 0 0 0 23.324445 27.875556l5.12 0.512H648.533333a28.444444 28.444444 0 0 0 27.875556-23.438222l0.512-5.12-0.170667-64.455111a28.444444 28.444444 0 0 0-23.324444-27.875556l-5.12-0.512zM212.195556 38.172444a42.666667 42.666667 0 0 1 5.461333 60.074667 398.222222 398.222222 0 0 0-92.16 256 398.222222 398.222222 0 0 0 95.459555 260.039111 42.666667 42.666667 0 0 1-64.796444 55.523556 483.555556 483.555556 0 0 1-116.053333-315.505778A483.555556 483.555556 0 0 1 152.120889 43.576889 42.666667 42.666667 0 0 1 212.138667 38.115556z m653.027555 3.413334a483.555556 483.555556 0 0 1 113.607111 312.718222c0 114.915556-39.822222 223.573333-110.990222 309.532444a42.666667 42.666667 0 0 1-65.706667-54.442666 398.279111 398.279111 0 0 0 91.363556-255.089778 398.222222 398.222222 0 0 0-93.525333-257.706667 42.666667 42.666667 0 0 1 65.251555-55.011555zM332.003556 174.933333a42.666667 42.666667 0 0 1 11.264 59.278223A209.692444 209.692444 0 0 0 307.029333 352.711111c0 43.463111 13.027556 84.764444 36.864 119.409778a42.666667 42.666667 0 0 1-70.257777 48.355555 295.025778 295.025778 0 0 1-51.939556-167.822222c0-60.245333 17.976889-117.930667 51.029333-166.456889a42.666667 42.666667 0 0 1 59.278223-11.264z m412.728888 12.913778c32.369778 48.184889 49.948444 105.244444 49.948445 164.864 0 58.083556-16.725333 113.777778-47.559111 161.223111a42.666667 42.666667 0 0 1-71.566222-46.478222A209.806222 209.806222 0 0 0 709.404444 352.711111c0-42.552889-12.515556-83.057778-35.498666-117.304889a42.666667 42.666667 0 1 1 70.883555-47.559111z"
            p-id="21977" fill="#2c2c2c"></path>
        </svg>
        <span>歌手雷达</span>
      </div>
    </div>
    <div class="text-lg" v-else>搜索 "{{ keyword }}"</div>
  </div>
  <div class="z-30 sticky top-0 bg-white pb-5 px-5">
    <ul class="flex gap-10 pt-5">
      <li :class="activeIndex == index ? 'active text-[#1ecc94]' : ''" class="cursor-default"
        v-for="(item, index) in navList" @click="changeSearchType(index)">
        {{ item }}
      </li>
    </ul>
    <div class="flex gap-7 mt-8" v-if="activeIndex === 0 || activeIndex === 4">
      <!-- 播放按钮-->
      <div class="flex h-fit px-3 py-1 rounded-2xl items-center bg-gray-200" @click="playAllSongs">
        <svg t="1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4038" width="22" height="22">
          <path
            d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
            fill="#040000" p-id="4039"></path>
        </svg>播放
      </div>
      <!-- 收藏按钮-->
      <div class="flex h-fit px-3 py-1 rounded-2xl items-center bg-gray-200">
        <svg t="1729242257875" class="icon mr-1" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="38385" width="20" height="20">
          <path
            d="M511.998465 64.757886c-247.004627 0-447.241091 200.236464-447.241091 447.242114 0 247.004627 200.236464 447.242114 447.241091 447.242114s447.243137-200.237487 447.243137-447.242114C959.241602 264.99435 759.003092 64.757886 511.998465 64.757886zM728.312092 575.543222 536.311197 731.942271c-12.658298 13.818727-33.215496 13.818727-45.870724 0L296.647769 575.532989c-12.654204-13.818727-12.654204-36.266995 0-50.084699 6.330172-6.942109 14.646582-13.44829 22.964014-13.44829 8.290827 0 14.143115 3.668553 23.212678 10.743692l138.080845 109.835547L480.905306 317.117474c0-19.593244 14.528901-35.422767 32.471552-35.422767s32.468482 15.829524 32.468482 35.422767l0 317.508377 133.069715-113.692389c17.202801-14.310937 34.666544-12.397355 47.350424 1.454118C738.921731 536.205285 740.968343 561.724495 728.312092 575.543222z"
            fill="#272636" p-id="38386"></path>
        </svg>
        下载
      </div>
      <!-- 更多按钮 -->
      <div class="flex h-fit px-3 py-1 rounded-2xl items-center bg-gray-200">
        <svg t="1729242386495" class="icon mr-1" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="46563" width="16" height="16">
          <path
            d="M282.16888853 726.2208a45.51111147 45.51111147 0 0 1 0 64.35271147l-96.57457706 96.57457706a45.51111147 45.51111147 0 0 1-64.35271147 0l-32.1763552-32.1763552a45.51111147 45.51111147 0 0 1 64.3527104-64.39822186l64.39822293-64.35271147a45.51111147 45.51111147 0 0 1 64.3527104 0zM921.6 785.06666667a45.51111147 45.51111147 0 0 1 0 91.02222186H420.97777813a45.51111147 45.51111147 0 0 1 0-91.02222186h500.62222187zM282.16888853 407.64302187a45.51111147 45.51111147 0 0 1 0 64.35271146l-96.57457706 96.57457814a45.51111147 45.51111147 0 0 1-64.35271147 0l-32.1763552-32.17635627a45.51111147 45.51111147 0 0 1 64.3527104-64.39822187l64.39822293-64.35271146a45.51111147 45.51111147 0 0 1 64.3527104 0zM921.6 466.48888853a45.51111147 45.51111147 0 0 1 0 91.02222294H420.97777813a45.51111147 45.51111147 0 0 1 0-91.02222294h500.62222187zM282.16888853 89.0652448a45.51111147 45.51111147 0 0 1 0 64.3527104L185.59431147 249.99253333a45.51111147 45.51111147 0 0 1-64.35271147 0l-32.1763552-32.1763552A45.51111147 45.51111147 0 0 1 153.4179552 153.3724448l64.39822293-64.35271147a45.51111147 45.51111147 0 0 1 64.3527104 0zM921.6 147.91111147a45.51111147 45.51111147 0 0 1 0 91.02222186H420.97777813a45.51111147 45.51111147 0 1 1 0-91.02222186h500.62222187z"
            fill="#000000" p-id="46564"></path>
        </svg>
        批量
      </div>
    </div>
  </div>

  <div>
    <songList :songsList="searchSongs" v-if="activeIndex === 0" />
    <videoListVue :list="videoList" v-else-if="activeIndex === 1" />
    <listVue type="songList" :list="songList" v-else-if="activeIndex === 2" />
    <listVue type="ablum" :list="ablumList" v-else-if="activeIndex === 3" />
    <lyricListVue :list="lyricList" v-else-if="activeIndex === 4" />
    <artistListVue :list="searchArtists" v-else />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useStore } from '@renderer/store'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import artistListVue from "../../components/artistList/index.vue"
import videoListVue from "../../components/videoList/index.vue"
import SongList from '@renderer/components/songList/songList.vue'
import listVue from '../../components/list/index.vue'
import lyricListVue from '../../components/lyricList/index.vue'

const route = useRoute()
const { searchStore, songDetailStore, playListStore } = useStore()
const { searchSongs, searchArtists, videoList, ablumList, songList, activeIndex, lyricList } = storeToRefs(searchStore)
const navList = ['歌曲', '视频', '歌单', '专辑', '歌词', '歌手']

const keyword = ref(route.query.keyword as unknown as string)

onMounted(() => {
  getSearchKey()
})
// 播放全部歌曲
const playAllSongs = () => {
  let palyId = 0
  let playList = [] as any[]
  if (activeIndex.value === 0) {
    palyId = searchSongs.value[0].id
    playList = searchSongs.value
  } else {
    palyId = lyricList.value[0].id
    playList = lyricList.value
  }
  songDetailStore.getSongDetail(palyId)
  songDetailStore.getSongUrl(palyId)
  playListStore.addAllSongToPlayList(playList)
}
// 根据关键字搜索歌曲
const getSearchKey = () => {
  searchStore.getSearch(keyword.value, 1)
}
const changeSearchType = (index: number) => {
  activeIndex.value = index
  let type = 0
  switch (index) {
    case 0:
      // 歌曲
      type = 1
      break;
    case 1:
      // 视频
      type = 1014
      break;
    case 2:
      // 歌单
      type = 1000
      break;
    case 3:
      // 专辑
      type = 10
      break;
      type = 1002
      break;
    case 4:
      // 歌词
      type = 1006
      break;
  }
  // 搜索
  searchStore.getSearch(keyword.value, type)
  if (index == 5) {
    // 歌手
    searchStore.getSearchArtists(keyword.value)
  }
}
</script>

<style scoped>
.active::after {
  content: '';
  display: block;
  width: 25px;
  height: 3px;
  background: #1ecc94;
  margin-top: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
}
</style>
